import React, { useState } from 'react';
import { Form, Input, Modal, Radio, Select } from 'antd';


const FormItem = Form.Item;

export interface UpdateFormProps {
  onCancel: () => void;
  onSubmit: (values: API.TaskItem,resetForm: () => void) => void;
  updateModalVisible: boolean;
  values:  API.DriverItem;

}

const formLayout = {
  labelCol: { span: 5 },
  wrapperCol: { span: 15 },
};




const UpdateForm: React.FC<UpdateFormProps> = (props) => {
  const [formVals] = useState<API.TaskItem>(props.values);

  
  const [form] = Form.useForm();

  const { updateModalVisible, onSubmit: handleUpdate,  onCancel} = props;

  const okHandle = async () => {
    const fieldsValue = await form.validateFields();
    fieldsValue.id = formVals.id;
   
    handleUpdate(fieldsValue,resetForm);
  };

  const resetForm= async () => {
    form.resetFields();
  };


  
  return (
    <Modal
      width={640}
     
      destroyOnClose
      title="编辑定时任务"
      visible={updateModalVisible}
      onOk={okHandle}
      onCancel={() => onCancel()}
    >
       <Form
        {...formLayout}
        form={form}
        initialValues={formVals}
      >
      <FormItem
          label="任务名称"
          name="jobName"
          rules={[{ required: true, message: '请输入字任务名称！'}]}
        >
          <Input placeholder="请输入" />
        </FormItem>
        <FormItem
          label="任务描述"
          name="description"
          rules={[{ required: true, message: '请输入任务描述！'}]}
        >
          <Input placeholder="请输入" />
        </FormItem>
        <FormItem
          label="cron表达式"
          name="cronExpression"
          rules={[{ required: true, message: '请输入cron表达式！'}]}
        >
          <Input placeholder="请输入" />
        </FormItem>
        <FormItem
          label="包名+类名"
          name="beanClass"
          rules={[{ required: true, message: '请输入包名+类名！'}]}
        >
          <Input placeholder="请输入" />
        </FormItem>
    
      </Form>
    </Modal>
  );
};

export default UpdateForm;
